<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <link rel="stylesheet" href="./css/swiper.min.css"/>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
    <script src="./js/jquery.js"></script>
    <script src="./js/swiper.min.js"></script>
    <style>
        .foot{
            margin-top: 0!important;
        }
    </style>
</head>
<body>
   <div class="homepage">
       <!--轮播图-->
       <div class="swiper-container">
           <div class="swiper-wrapper" >
               <div class="swiper-slide" >
                   <img src="./images/home1.jpg" alt=""/>
               </div>
               <div class="swiper-slide" >
                   <img src="./images/home2.jpg" alt=""/>
               </div>
           </div>
           <div class="using"><a href="./nestCloud.html"><button>一键使用</button></a></div>
           <!-- Add Pagination -->
           <div class="swiper-pagination"></div>
       </div>
       <!--节省资源-->
       <div class="homeTit">
           <p class="title">节省资源</p>
           <i></i>
           <p class="titleF">虚拟机运行在浏览器，不占用本地资源</p>
       </div>
       <div class="perCenter">
           <div class="spare">
               <img src="./images/content1.png" alt=""/>
           </div>
           <div style="position: relative" class="using"><a href="./nestCloud.html"><button style="color: #333">一键使用</button></a></div>
       </div>
       <div class="easy">
           <div class="perCenter">
               <div class="homeTit" >
                   <p class="title" style="color: #fff">操作简单</p>
                   <i style="background-color: #fff"></i>
                   <p class="titleF" style="color: #fff">操作简单 无需安装操作系统一键生成虚拟机</p>
               </div>
               <div class="easyImg">
                   <img src="./images/content2-1.png" alt=""/>
               </div>
           </div>
       </div>
       <div class="homeTit">
           <p class="title">三端合一</p>
           <i></i>
           <p class="titleF">电脑手机平板无缝对接，随时随地操作虚拟系统机</p>
       </div>
       <div class="perCenter">
           <div class="spare">
               <img src="./images/content3.png" alt=""/>
           </div>
       </div>
       <div class="easy safety">
           <div class="perCenter">
               <div class="safetyL"><img src="./images/content4-1.png" alt=""/></div>
               <div class="safetyR">
                   <p>安全可靠</p>
                   <p class="virB">虚拟机部署在云端，安全又可靠</p>
               </div>
           </div>
       </div>
   </div>
   <div class="suspend">
       <div class="QQ">
           <img src="./images/code.png" alt=""/>
           <p>优租云官方交流群</p>
           <p>群号 ：321336851</p>
       </div>
       <ul>
           <li class="official">
               <i class="icon iconfont icon-qunzu"></i>
               <div class="name">官方Q群</div>
           </li>
           <a href="./survey.html">
               <li>
                   <i class="icon iconfont">&#xe6d9;</i>
                  <div class="name">问卷调查</div>
               </li>
           </a>
           <li class="to-top">
               <i class="icon iconfont icon-huojian"></i>
               <div class="name">返回顶部</div>
           </li>
       </ul>
   </div>
<div class="footer"></div>
</body>
<script src="./lib/layer/layer.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination:{
            el: '.swiper-pagination'
        },
        autoplay: {
            delay: 2500,
            disableOnInteraction: false
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true//修改swiper的父元素时，自动初始化swiper
    });
    let $official = $('.official');
    $official.mouseover(function(){
        $(".QQ").css("display","block");
    });
    $official.mouseout(function(){
        $(".QQ").css("display","none");
    });
    let timer;
    $('.to-top').on('click',function(){
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn(){
            let oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop > 0){
                scrollTo(0,oTop-100);
                timer = requestAnimationFrame(fn);
            }else{
                cancelAnimationFrame(timer);
            }
        });
    });
    $(document).on('scroll',function () {
        let distance = document.body.scrollTop || document.documentElement.scrollTop;
        if(distance>=790){
            $('.to-top').show();
        }else {
            $('.to-top').hide();
        }
    })
    $('.footer').load('./footer.html')
</script>
</html>